.foxui-progress {
    position: relative;
    line-height: 1;
    background-color: transparent;
}

.foxui-progress-line {
    padding-right: 50px;
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    margin-right: -55px;
    box-sizing: border-box;
}

.foxui-progress-line__outer {
    position: relative;
    overflow: hidden;
    height: $--progress-line-height;
    border-radius: $--progress-line-radius;
    background-color: $--border-color-lighter;
    vertical-align: middle;
}

.foxui-progress-line__inner {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    text-align: right;
    background-color: $--porgress-bg-color;
    white-space: nowrap;
    border-radius: $--progress-line-radius;
    line-height: 1;
    transition: width 0.6s ease;

    &::after {
        content: '';
        display: inline-block;
        vertical-align: middle;
        height: 100%;
    }
}

.foxui-progress-line__innerText,
.foxui-progress__text {
    display: inline-block;
    vertical-align: middle;
}

.foxui-progress-line__innerText {
    color: $--progress-line-innertext-font--color;
    font-size: $--progress-line-innertext-font-size;
    margin: 0 6px;
}

.foxui-progress__text {
    font-size: $--progress-line-outtext-font-size;
    color: $--progress-line-outtext-font-color;
    margin-left: 10px;
    line-height: 1;
}

// 条形进度条条纹
.foxui-progress-line__striped {
    background-image: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.15) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.15) 75%,
        transparent 75%,
        transparent
    );
    background-size: 1rem 1rem;
}

// 条形进度条条纹动画
.foxui-progress-line__animated {
    -webkit-animation: progress-line-stripes 1s linear infinite;
    animation: progress-line-stripes 1s linear infinite;
}
@keyframes progress-line-stripes {
    0% {
        background-position-x: 1rem;
    }
}

// 圆形进度条
.foxui-progress-type__circle,
.foxui-progress-type__dashboard {
    display: inline-block;

    .foxui-progress__text {
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        text-align: center;
        margin: 0;
        transform: translateY(-50%);
        font-size: 16px;
    }
}

.foxui-progress-circle__track {
    stroke: $--border-color-lighter;
}

.foxui-progress-circle__path {
    stroke: $--porgress-bg-color;
}
